<template>
  <div class="create_form_box">
    <div class="create_form_content">
      <a-form :form="form">

        <a-form-item label="姓名">
          <a-input v-decorator="['name', { rules: [{ required: true, message: '请输入账户姓名!' }] }]" placeholder="请输入账户姓名" />
        </a-form-item>
        <a-form-item label="公司">
          <a-select v-decorator="['companyId', { rules: [{ required: true, message: '请输入账户公司!' }] }]" placeholder="请输入账户公司">
            <a-select-option v-for="item in companies" :key="item.companyId" :value="item.companyId">{{ item.companyName }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="电子邮箱">
          <a-input v-decorator="['email', { rules: [{ required: true, message: '请输入账户电子邮箱!' }] }]" placeholder="请输入账户电子邮箱" />
        </a-form-item>
        <a-form-item label="手机号">
          <a-input v-decorator="['phone', { rules: [{ required: true, message: '请输入账户的手机号!' }] }]" placeholder="请输入账户的手机号" />
        </a-form-item>
        <a-form-item label="角色">
          <!--          <a-input v-decorator="['roleId', { rules: [{ required: true, message: '请输入账户的角色!' }] }]" placeholder="请输入账户的角色" />-->
          <a-select v-decorator="['roleId', { rules: [{ required: true, message: '请输入账户的角色!' }] }]" placeholder="请输入账户的角色">
            <a-select-option v-for="item in roles" :key="item.id" :value="item.id">{{ item.roleName }}</a-select-option>
          </a-select>
        </a-form-item>

      </a-form>

      <div class="create_form_font">
        <a-button size="large" key="cancel" @click="handleCancel" style="margin-left:20px;">取消</a-button>
        <a-button
          size="large"
          key="forward"
          :loading="confirmLoading"
          type="primary"
          @click="handleAdd"
          style="margin-left:20px;">确定</a-button>
      </div>

    </div>
    <div>
      <a-modal
        title="提示"
        :footer="null"
        :width="976"
        :visible="createFormSuccess"
        :confirmLoading="confirmLoading"
        @ok="createFormOk"
        @cancel="createFormOk"
        class="crearteFormSuccess_title">
        <div class="crearteFormSuccess_box">
          <img src="@/assets/images/crearteFormSuccess.png" alt="">
          <p><span>账号</span><i>{{email}}</i><span>创建成功</span></p>
          <p><em>激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。</em></p>
          <button @click="createFormOk">关闭</button>
        </div>
      </a-modal>
    </div>

  </div>

</template>

<script>
import { postAccountAdd } from '@/api/manage'

export default {
  name: 'NotificationForm',
  props: {
    roles: {
      default: null
    },
    companies: {
      default: null
    }
  },
  data () {
    // props: {
    //   roles,
    //   companies
    // },
    return {
      email: '',
      // valuesss: '',
      createFormSuccess: false,
      confirmLoading: false,
      form: this.$form.createForm(this)
    }
  },
  methods: {
    handleCancel () {
      this.$emit('Cancel')
    },
    handleAdd () {
      // eslint-disable-next-line handle-callback-err
      this.form.validateFields((err, values) => {
        console.log(values)
        // debugger

        if (!values) {
          return
        }

        if (!values['name'] || !values['companyId'] || !values['phone'] || !values['email'] || !values['roleId']) {
          return
        }

        // this.confirmLoading = true
        // this.createFormEdit = false
        this.confirmLoading = true
        const name = values['name']
        const companyId = values['companyId']
        const phone = values['phone']
        const email = values['email']
        const roleId = values['roleId']

        const body = {
          name: name,
          companyId: companyId,
          phone: phone,
          email: email,
          roleId: roleId,
          url: 'http://www.apct.com/user/register?email=' + email
        }

        // debugger
        postAccountAdd(body).then(res => {
          console.log(res.message)
          // this.roles = res.data
          // debugger
          // this.selectedRoles = res.data.roles
          // return res.data
          // this.createFormBox = true
          this.confirmLoading = false
          // this.$refs.table.refresh(true)
          // this.confirmLoading = false
          if (res.code === 200) {
            this.email = email
            this.$message.success(res.message)
            // this.createFormEdit = false
            // this.$refs.table.refresh(true)
            this.createFormSuccess = true
            // this.$emit('ok')
          } else {
            this.$message.error(res.message)
          }
          // this.$emit('ok')
        })
      })
    },
    createFormOk () {
      this.createFormSuccess = false
      this.$emit('ok')
    }
  }
}
</script>
<style lang="less" >
.crearteFormSuccess_title {
  .ant-modal-title {
    width: 160px;
    height: 24px;
    font-size: 24px;
    font-family: PingFangSC-Medium, PingFangSC-Regular, sans-serif;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.85);
    line-height: 24px;
  }
}
.crearteFormSuccess_box {
  text-align: center;
  img {
    width: 250px;
  }
  p {
    margin: 24px 0;
  }
  span {
    font-size: 24px;
    font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    line-height: 24px;
  }
  i {
    font-style: normal;
    font-size: 24px;
    font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
    font-weight: 400;
    color: #56ced1;
    line-height: 24px;
  }
  em {
    font-style: normal;
    font-size: 18px;
    font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.25);
    line-height: 29px;
  }
  button {
    outline: none;
    width: 112px;
    height: 40px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(217, 217, 217, 1);
    font-weight: 700;
  }
  button:hover {
    background: #56ced1;
    opacity: 0.8;
  }
}
.create_form_box {
  overflow: hidden;
}
.create_form_content {
  margin: 24px 66px;
}
.create_form_font {
  float: right;
}

.create_form_item1_title {
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  span {
    font-size: 17px;
    color: #d31e27;
  }
}

.form_style {
  width: 224px;
}
.createForm_count_time {
  min-width: 165px;
  margin-right: 20px;
}
</style>
